React Memoization 和 React Compiler

在昨天的文章介紹了如何使用 React.memo , useMemo 和 useCallback 來減少非必要的重新渲染，然而在實作上可能會使程式碼變得很複雜。因此，React 19 推出了 React Compiler，可以自動優化非必要的重新渲染，省去手動添加 memoization 的麻煩，讓開發體驗更好，並且提升應用程式的效能。

React Compiler 做了什麼?

React Compiler 在目前版本主要是針對避免非必要的重新渲染的情況做處理，React Compiler 做了以下幾件事：

• 避免非必要的重復渲染 : React Compiler 會自動 Memoize 不需要重新渲染的元件。
• 避免複雜運算 : 針對複雜運算進行優化，避免在重複渲染時重複執行。

要注意的是 React Compiler 只會記住元件和 hooks。所以如果有複雜的運算是定義在元件外部的，仍需要自行處理 Memoization。

另外 React Compiler 目前還沒有包含 Memoizing effects 的 dependencies，這部份功能還在開發和研究中。

在使用 React Compiler 之前

在開始使用 React Compiler 之前，可以透過以下指令進行環境檢查 Codebase 是否和 React Compiler 兼容：

npx react-compiler-healthcheck@latest

使用上方指令會檢查

• 會檢查有多少元件是可以成功優化的
• 是否遵守 React 規則
• 是否有不相容的 library

React 規則

透過遵守 React 規則，可以讓程式碼品質更好，還能讓程式碼更適合採用 React Compiler。React Compiler 也提供了相關的 ESLint plugin，可以在編輯器中提示任何違反 React 規則的行為。另外即使不使用 React Compiler 也可以使用此 plugin。

npm install eslint-plugin-react-compiler@experimental

這個 plugin 會檢查是否有違反 React 規則的地方，可以不需要立即修正所有的錯誤，React Compiler 也會安全地跳過並繼續優化其他部分。

使用 React Compiler

要使用 React Compiler，需要安裝 Babel plugin：

npm i babel-plugin-react-compiler

具體的安裝說明可以參考官方文件，不同框架的整合方式會有所不同。另外，也可以在 React 官方 Playground 進行測試。

如果是在舊版的程式碼，要將使用的版本改成 Canary 版本。

npm install --save-exact react@rc react-dom@rc

或者如果沒有辦法升級但是使用17版以上的程式碼，可以下載 react-compiler-runtime。

npm install react-compiler-runtime@experimental

並在 target 選擇對應的版本。

const ReactCompilerConfig = {
  target: '18' // '17' | '18' | '19'
};

module.exports = function () {
  return {
    plugins: [
      ['babel-plugin-react-compiler', ReactCompilerConfig],
    ],
  };
};

也可以選擇只在某些檔案中測試 React Compiler：

const ReactCompilerConfig = {
  sources: (filename) => {
    return filename.indexOf("src/path/to/dir") !== -1;
  },
};

如果在程式碼中已經使用了 React.memo , useMemo 和 useCallback，React Compiler 不會干擾這些手動設定，你不需要進行額外的修改。

檢查方式和錯誤處理

可以使用 React DevTools 檢查元件是否已被 Memoized。如果元件旁出現「Memo ✨」標記，表示該元件已被自動 Memoize。

如果在編譯後無法正常運作，並且你沒有看到任何 ESLint 錯誤，這可能表示編譯錯誤。
這時可以使用 "use no memo" React Compiler 會跳過編譯此元件。

function SomeComponent() {
  "use no memo";
  // ...
}

React Compiler 目前雖然有在 Meta 等公司的生產環境中使用，但目前都還是在實驗階段，可以等穩定後再使用，另外未來寫法或功能都有可能會更改。

在下一篇文章會介紹 React Compiler 內部是怎麼運作的。

參考資料:
https://github.com/reactwg/react-compiler/discussions/5
https://www.youtube.com/watch?v=Z-a4B7EIDXw
https://www.youtube.com/watch?v=lvhPq5chokM
https://react.dev/learn/react-compiler